<template>
  <div class="wrapper">
    <el-slider
      v-model="pageZoom"
      :min="0.5"
      :max="2"
      :step="0.05"
      @change="handleSliderChange"
      :format-tooltip="format"
    ></el-slider>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import store from '@/store'

export default {
  data() {
    return {
      pageZoom: 1
    }
  },
  methods: {
    format(val) {
      return Math.round(val * 100) + '%'
    },
    handleSliderChange(val) {
      const lastPageZoom = store.state.xmleditor.pageZoom
      this.$store.commit('xmleditor/SET_PAGE_ZOOM', val)
      const win = tinymce.activeEditor.getWin()
      win.scrollTo({ top: (val / lastPageZoom) * win?.document?.documentElement?.scrollTop })
      tinymce.activeEditor.dom.setStyle(tinymce.activeEditor.dom.select('#tinymce'), 'zoom', val)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100px;
  position: fixed;
  bottom: 5px;
  right: 360px;
}
::v-deep .el-slider__runway:hover {
  opacity: 1;
}
::v-deep .el-slider__runway {
  opacity: 0.5;
  width: 100%;
  height: 4px;
  margin: 16px 0;
  background-color: #e4e7ed;
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
::v-deep .el-slider__button-wrapper {
  height: 24px;
  width: 24px;
  position: absolute;
  z-index: 1001;
  top: -11px;
  transform: translateX(-50%);
  background-color: transparent;
  text-align: center;
  user-select: none;
  line-height: normal;
}
::v-deep .el-slider__button-wrapper .el-tooltip,
.el-slider__button-wrapper:after {
  display: inline-block;
  vertical-align: middle;
}
::v-deep .el-slider__button {
  width: 10px;
  height: 10px;
  border: 2px solid #409eff;
  background-color: #fff;
  border-radius: 50%;
  transition: 0.2s;
  user-select: none;
}
::v-deep .el-slider__bar {
  height: 4px;
  background-color: #409eff;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}
</style>
